<template>
	<div :class="$style.buy">
		<span :class="$style.label">买入数量</span>

		<input
			type="number"
			placeholder="输入数量/选择仓位"
			v-model="buyAmount"
			:class="$style.amount">

		<div
			:class="$style.minus"
			:style="minusStyle"
			@click="minus">
			<p :class="$style.symbol">一</p>
			<p :class="$style.num">100</p>
		</div>

		<div
			:class="$style.plus"
			:style="plusStyle"
			@click="plus">
			<p :class="$style.symbol">十</p>
			<p :class="$style.num">100</p>
		</div>

		<div
			v-show="buyAmount > 0 && showDelegatePrice"
			:class="$style.need">
			预计金额:
			<span>{{ buyAmount * buyDelegatePrice | formatPrice }}</span>
		</div>
	</div>
</template>

<script>
	import formatPrice from '../../../filters/formatPrice'

	export default {

		props: {
			gameid: {
				type: String,
				default: ''
			}
		},

		computed: {
			buyAmount: {
				get () {
					return this.$store.state.buyAmount || ''
				},

				set (value) {
					return this.$store.dispatch('setBuyAmount', parseInt(value))
				}
			},

			buyEnableVol () {
				return Number(this.$store.state.buyEnableVol)
			},

			buyDelegatePrice () {
				return this.$store.state.buyDelegatePrice
			},

			showDelegatePrice () {
				return this.$store.state.buyDelegateType == '0'
					|| this.$store.state.buyDelegateType == '1'
					|| this.$store.state.buyDelegateType == ''
			},

			minusStyle () {
				const gameId = this.gameid
				return { backgroundColor: !!gameId ? 'rgb(209, 50, 0)' : 'rgba(0, 0, 0, 0.2)' }
			},

			plusStyle () {
				const gameId = this.gameid
				return { backgroundColor: !!gameId ? 'rgb(209, 50, 0)' : 'rgba(0, 0, 0, 0.2)' }
			}
		},

		filters: {
			formatPrice
		},

		methods: {
			plus () {
				if (Number(this.buyAmount) + 100 <= this.buyEnableVol) {
					this.$store.dispatch('setBuyAmount', Number(this.buyAmount) + 100)
				} else {
					this.$store.dispatch('setBuyAmount', this.buyEnableVol)
				}
			},

			minus () {
				if (Number(this.buyAmount) > 100) {
					this.$store.dispatch('setBuyAmount', this.buyAmount - 100)
				}
			}
		}
	}
</script>

<style module lang="less">

	.buy {
		display: -webkit-box;
		position: relative;
	}

	.label {
		color: #fff;
		font-size: 14px;
		height: 40px;
		line-height: 45px;
	}

	.amount {
		display: block;
		-webkit-box-flex: 1;
		border: none;
		background: transparent;
		font-size: 16px;
		margin-left: 25px;
		height: 20px;
		line-height: 20px;
		margin-top: 12px;
		color: #fff;
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);

		&::-webkit-input-placeholder {
			color:#ffffff;
			opacity: 0.8;
			font-size: 15px;
			line-height: 20px;
		}
	}

	.minus, .plus {

		border-radius: 99px;
		background: rgba(0, 0, 0, 0.2);
		width: 30px;
		height: 30px;
		margin: 0 3px;
		padding: 2px;
		box-sizing: content-box;
		-webkit-tap-highlight-color: #fff;

		&:active {
			background-color: #fff;

			p {
				color: #6ba9af;
			}
		}

		p {
			margin: 0;
			text-align: center;
			color: #fff;
			-webkit-tap-highlight-color: #6ba9af;
		}
	}

	.symbol {
		font-size: 10px;
		height: 12px;
		line-height: 12px;
	}

	.num {
		font-size: 12px;
		height: 16px;
		line-height: 16px;
	}

	.need {
		position: absolute;
		left: 50%;
		text-align: center;
		background-color: #FF3333;
		border-radius: 999px;
		color: #fff;
		padding: 5px 12px;
		white-space: nowrap;
		font-size: 12px;
		transform: translate(-50%, 100%);

		span {
			font-size: 16px;
		}

		&::after {
			position: absolute;
			top: 0;
			left: 50%;
			width: 14px;
			height: 14px;
			content: '';
			transform: rotate(45deg);
			margin-top: -7px;
			margin-left: -7px;
			background-color: #ff3333;
		}
	}
</style>
